<template>
  <!-- 查询条件 -->
  <div class="search-container">
    <el-card class="search-card">
      <div class="search-header">
        <h3>游客搜索</h3>
        <p>查找您需要的游客信息</p>
      </div>
      <el-row :gutter="20">
        <el-col :span="4">
          <el-input v-model="searchObj.username" placeholder="用户名" clearable>
            <template #prefix>
              <i class="el-icon-user"></i>
            </template>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-select v-model="searchObj.gender" placeholder="性别" clearable style="width: 100%;">
            <el-option label="男" :value="1"></el-option>
            <el-option label="女" :value="0"></el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-input v-model="searchObj.position" placeholder="位置" clearable>
            <template #prefix>
              <i class="el-icon-location"></i>
            </template>
          </el-input>
        </el-col>
        <el-col :span="6">
          <div class="search-actions">
            <el-button type="primary" @click="handleSearch" round>
              <i class="el-icon-search"></i> 查询
            </el-button>
            <el-button @click="handleReset" round>
              <i class="el-icon-refresh"></i> 重置
            </el-button>
            <el-button type="success" @click="handleAdd" round>
              <i class="el-icon-plus"></i> 添加游客
            </el-button>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>

  <!-- 数据表格 -->
  <el-card class="table-card">
    <template #header>
      <div class="table-header">
        <h3>游客列表</h3>
        <p>共 {{ tableData.totalCount || 0 }} 条记录</p>
      </div>
    </template>

    <el-table :data="tableData.data || []" style="width: 100%" border>
      <el-table-column label="用户名" width="200">
        <template #default="scope">
          <el-popover effect="light" trigger="hover" placement="top" width="auto">
            <template #default>
              <div>用户名: {{ scope.row.username }}</div>
            </template>
            <template #reference>
              <el-tag type="primary">{{ scope.row.username }}</el-tag>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="性别" width="200">
        <template #default="scope">
          <el-popover effect="light" trigger="hover" placement="top" width="auto">
            <template #default>
              <div>性别: {{ scope.row.gender === 0 ? '女' : '男'}}</div>
            </template>
            <template #reference>
              <el-tag :type="scope.row.gender === 0 ? 'danger' : 'primary'">
                {{ scope.row.gender === 0 ? '女' : '男' }}
              </el-tag>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="手机号" width="200">
        <template #default="scope">
          <el-popover effect="light" trigger="hover" placement="top" width="auto">
            <template #default>
              <div>手机号: {{ scope.row.phone }}</div>
            </template>
            <template #reference>
              <el-tag type="info">{{ scope.row.phone }}</el-tag>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="邮箱" width="200">
        <template #default="scope">
          <el-popover effect="light" trigger="hover" placement="top" width="auto">
            <template #default>
              <div>邮箱: {{ scope.row.email }}</div>
            </template>
            <template #reference>
              <el-tag type="success">{{ scope.row.email }}</el-tag>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="位置" width="200">
        <template #default="scope">
          <el-popover effect="light" trigger="hover" placement="top" width="auto">
            <template #default>
              <div>位置: {{ scope.row.position }}</div>
            </template>
            <template #reference>
              <el-tag>{{ scope.row.position }}</el-tag>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)" round>
            <i class="el-icon-edit"></i> 修改
          </el-button>
          <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              round
          >
            <i class="el-icon-delete"></i> 删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
          v-model:current-page="searchObj.currentPage"
          v-model:page-size="searchObj.pageSize"
          :page-sizes="[5,10, 20, 30, 50]"
          :total="tableData.totalCount || 0"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
      />
    </div>
  </el-card>

  <!-- 添加对话框 -->
  <el-dialog v-model="addDialogVisible" title="添加游客信息" width="500px" class="custom-dialog">
    <el-form :model="newVisitorData" label-width="100px">
      <el-form-item label="用户名">
        <el-input v-model="newVisitorData.username" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-select v-model="newVisitorData.gender" placeholder="请选择性别">
          <el-option label="男" :value="1"></el-option>
          <el-option label="女" :value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="newVisitorData.phone" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="newVisitorData.email" placeholder="请输入邮箱"></el-input>
      </el-form-item>
      <el-form-item label="位置">
        <el-input v-model="newVisitorData.position" placeholder="请输入位置"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="addDialogVisible = false" round>取消</el-button>
        <el-button type="primary" @click="saveAdd" round>保存</el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 编辑对话框 -->
  <el-dialog v-model="editDialogVisible" title="编辑游客信息" width="500px" class="custom-dialog">
    <el-form :model="currentEditData" label-width="100px">
      <el-form-item label="用户名">
        <el-input v-model="currentEditData.username" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-select v-model="currentEditData.gender" placeholder="请选择性别">
          <el-option label="男" :value="1"></el-option>
          <el-option label="女" :value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="currentEditData.phone" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="currentEditData.email" placeholder="请输入邮箱"></el-input>
      </el-form-item>
      <el-form-item label="位置">
        <el-input v-model="currentEditData.position" placeholder="请输入位置"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="editDialogVisible = false" round>取消</el-button>
        <el-button type="primary" @click="saveEdit" round>保存</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import {ref, onMounted} from "vue";
import {ElMessage, ElMessageBox} from 'element-plus'
import m_visitor_api from "../../api/manager/m_visitor_api.js";

//定义绑定的数据
//表格中的数据
const tableData = ref({})
//查询数据
const searchObj = ref({
  currentPage: 1,
  pageSize: 10,
  totalCount: 0,
  username: '',
  gender: '',
  phone: '',
  email: '',
  position: ''
})

//添加对话框相关数据
const addDialogVisible = ref(false)
const newVisitorData = ref({
  username: '',
  gender: 1,
  phone: '',
  email: '',
  position: ''
})

//编辑对话框相关数据
const editDialogVisible = ref(false)
const currentEditData = ref({})

//页面加载后要挂载的数据
onMounted(async () => {
  await loadData();
})

//加载数据方法
const loadData = async () => {
  try {
    const result = await m_visitor_api.page(searchObj.value);
    // 确保返回的数据结构正确
    if (result && typeof result === 'object') {
      tableData.value = result;
    } else {
      tableData.value = {data: [], totalCount: 0};
    }
  } catch (error) {
    console.error('加载数据失败:', error);
    tableData.value = {data: [], totalCount: 0};
    ElMessage.error('数据加载失败: ' + error.message);
  }
}

//查询功能
const handleSearch = async () => {
  searchObj.value.currentPage = 1;
  await loadData();
}

//重置查询条件
const handleReset = async () => {
  searchObj.value = {
    currentPage: 1,
    pageSize: 10,
    totalCount: 0,
    username: '',
    gender: '',
    phone: '',
    email: '',
    position: ''
  }
  await loadData();
}

//添加功能
const handleAdd = () => {
  //重置表单数据
  newVisitorData.value = {
    username: '',
    gender: 1,
    phone: '',
    email: '',
    position: ''
  }
  //显示添加对话框
  addDialogVisible.value = true
}

const saveAdd = async () => {
  try {
    //调用API添加数据
    await m_visitor_api.add(newVisitorData.value)
    //重新加载数据
    await loadData()
    //关闭对话框
    addDialogVisible.value = false
    //显示成功消息
    ElMessage.success('添加成功')
  } catch (error) {
    ElMessage.error('添加失败: ' + error.message)
  }
}

//编辑功能
const handleEdit = (index, row) => {
  //将当前行数据复制到编辑对象中
  currentEditData.value = {...row}
  //显示编辑对话框
  editDialogVisible.value = true
}

const saveEdit = async () => {
  try {
    //调用API更新数据
    await m_visitor_api.edit(currentEditData.value)
    //重新加载数据
    await loadData()
    //关闭对话框
    editDialogVisible.value = false
    //显示成功消息
    ElMessage.success('修改成功')
  } catch (error) {
    ElMessage.error('修改失败: ' + error.message)
  }
}

//删除功能
const handleDelete = (index, row) => {
  ElMessageBox.confirm(
      `确定要删除游客 "${row.username}" 吗？此操作不可恢复！`,
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(async () => {
    try {
      //调用API删除数据
      await m_visitor_api.del(row.id)
      //重新加载数据
      await loadData()
      //显示删除成功消息
      ElMessage.success('删除成功')
    } catch (error) {
      //处理删除失败的情况
      ElMessage.error('删除失败: ' + error.message)
    }
  }).catch(() => {
    //用户取消删除
    ElMessage.info('已取消删除')
  })
}

//分页功能
const handleSizeChange = async (val) => {
  searchObj.value.pageSize = val;
  searchObj.value.currentPage = 1;// 页大小改变时重置到第一页
  await loadData();
}

const handleCurrentChange = async (val) => {
  searchObj.value.currentPage = val;
  await loadData();
}
</script>

<style scoped>
.search-container {
  margin-bottom: 20px;
}

.search-card {
  border-radius: 15px;
  box-shadow: 0 8px 24px rgba(168, 192, 235, 0.2);
  background: linear-gradient(135deg, #e6f7ff 0%, #f0f9ff 100%);
  color: #333;
  border: none;
}

:deep(.search-card .el-card__body) {
  padding: 25px;
}

.search-header h3 {
  margin: 0 0 8px 0;
  font-size: 20px;
  font-weight: 600;
  color: #409eff;
}

.search-header p {
  margin: 0 0 20px 0;
  color: #666;
  font-size: 14px;
}

.search-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
}

.table-card {
  border-radius: 15px;
  box-shadow: 0 8px 24px rgba(168, 192, 235, 0.2);
  border: none;
}

:deep(.table-card .el-card__header) {
  background: linear-gradient(135deg, #e6f7ff 0%, #f0f9ff 100%);
  color: #409eff;
  border-radius: 15px 15px 0 0 !important;
  padding: 20px;
  border: none;
}

.table-header h3 {
  margin: 0 0 5px 0;
  font-size: 20px;
  font-weight: 600;
  color: #409eff;
}

.table-header p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.pagination-container {
  margin-top: 25px;
  display: flex;
  justify-content: center;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 15px;
}

.custom-dialog {
  border-radius: 15px;
  overflow: hidden;
}

:deep(.custom-dialog .el-dialog__header) {
  background: linear-gradient(135deg, #e6f7ff 0%, #f0f9ff 100%);
  color: #409eff;
  padding: 20px;
  border-radius: 15px 15px 0 0 !important;
}

:deep(.custom-dialog .el-dialog__title) {
  color: #409eff;
  font-weight: 600;
}

:deep(.el-table) {
  border-radius: 10px;
  overflow: hidden;
}

:deep(.el-table th) {
  background: linear-gradient(135deg, #e6f7ff 0%, #f0f9ff 100%);
  color: #409eff;
}

@media (max-width: 768px) {
  .search-actions {
    flex-wrap: wrap;
    gap: 8px;
  }

  :deep(.el-table) {
    font-size: 12px;
  }

  :deep(.el-table th) {
    font-size: 12px;
    padding: 8px 0;
  }
}
</style>
